<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>主体页面1</title>
    <link rel="stylesheet" href="<%=basePath%>css/index1.css">
    <link rel="stylesheet" href="<%=basePath%>css/setting.css">
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
</head>
<body>
<!-- 将要删除的id通过隐藏表单域的方式将内容传给后台 -->
<form action="deleteById" method="post" id="deleForm">
    <input type="hidden" name="id" id="sid"/>
</form>
<form action="/updateByParamValue" method="post" id="upForm">
    <input type="hidden" name="cid" id="cid"/>
    <input type="hidden" name="paramValue" id="paramValue" value=""/>
</form>
<div>
    <div class="header clearfix">
        <div class="title">EBO测试用</div>
        <div class="add">+</div>
        <div>
            <ul class="nav clearfix">
                <a class="home" href="<%=basePath%>tojump">首页</a>
                <li id="1"><a href="toDemand">需求</a></li>
                <li id="2"><a href="findParams">设置</a></li>
            </ul>
        </div>
    </div>
    <div class="content active">
        <div class="lets">
                <span class="proc">
                    <h2>
                        <a href=""></a>项目设置</h2>
                </span>
            <ul class="let clearfix">
                <li>
                    <a href="#">项目信息</a>
                </li>
                <li>
                    <a href="#">应用设置</a>
                </li>
                <li>
                    <a href="#">成员与权限</a>
                </li>
                <li>
                    <a href="#">消息与报告</a>
                </li>
                <li class="active">
                    <a href="findParams">其他设置</a>
                </li>
                <li class="active">
                    <a href="/updatePassword">修改密码</a>
                </li>
            </ul>

            <div class="setting_content">
                <div style="text-align: center;"><h2>字段设置</h2></div>
                <div class="add_set">
                    <a href="toModule" style="font-size: 3em;">添加字典</a>
                </div>
                <form action="findParams" id="setting" method="post">
                    <div id="so">
                        模块名称:<input type="text" name="modelName" value="${modelName}"> &nbsp;
                        模块描述:<input type="text" name="modelAccount" value="${modelAccount}"> &nbsp;
                        <input  class="search"  name="search" type="button" onclick="findSetting()"  value="搜索">
                    </div>
                    <table class="set-table">
                        <thead class="set-thead">
                        <th>模块名称</th>
                        <th>模块描述</th>
                        <th>模块创建人</th>
                        <th>创建时间</th>
                        <th>操&nbsp;&nbsp;作</th>
                        </thead>
                        <tbody class="set-tbody">
                        <c:forEach items="${requestScope.list.data}" var="p">
                            <tr>
                                <td align="center" width="2%">
                                    <input type="hidden" id="tid" value="${p.id}"/>
                                        ${p.typeName}
                                </td>
                                <td align="center" width="2%" ondblclick="ShowElement(this,'${p.id}')">

                                        ${p.paramValue}
                                </td>
                                <td align="center" width="2%">

                                </td>
                                <td align="center" width="2%">
                                        ${p.updateTime}
                                </td>
                                <td width="2%">
                                <span class="operation">
                                     <a href="javaScript:deleteById(${p.id})"><img src="../images/delete.png" title="删除"></a>
                                </span>
                                </td>
                            </tr>
                            <input type="hidden" name="pageNo" id="pageNo" value="${list.pageNo}"/>
                            <input type="hidden" name="setPageSize" id="setPageSize" value="${list.pageSize}"/>
                        </c:forEach>
                        </tbody>
                    </table>
                </form>
                <!-- 引入分页 -->
                <jsp:include page="jsp/page.jsp" flush="true">
                    <jsp:param name="" value=""/>
                </jsp:include>
            </div>
        </div>
    </div>

    <div class="siber">
        <img class="logo" src="./images/jianzhu.png" alt="">
        <a href="#">
            <img src="./images/box.png" alt="">
        </a>
        <a href="#">
            <img src="./images/text.png" alt="">
        </a>
        <a href="#">
            <img src="./images/xiangmu.png" alt="">
        </a>
        <a href="#">
            <img src="./images/lingdang.png" alt="">
        </a>
    </div>

</div>
<script>
    $(document).ready(function () {
        var uls = document.getElementsByClassName('nav');
        console.log($(".nav li"));
        var lis = $(".nav li");
        var contents = document.getElementsByClassName('content');
        for (var i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                for (var j = 0; j < contents.length; j++) {
                    contents[j].className = "content";
                }
                contents[this.id - 1].className += ' active';
            };
        }
        //操作函数入口
        $('.operation').click(function () {
            //alert('111');

        });
    });
    function deleteById(id){
        document.getElementById("sid").value=id;
        var f=confirm("你确认要删除吗？");
        if(f){
            var deleForm=document.getElementById("deleForm");
            deleForm.submit();
        }
    }

    //页面跳转
    function gotoPage(pageNo) {
        if(pageNo==0){
            document.getElementById("pageNo").value = document.getElementById("inputPage").value;
            document.getElementById("setPageSize").value = document.getElementById("getPageSize").value;
        }else {
            document.getElementById("pageNo").value = pageNo;
        }
        var forms = document.getElementById("setting");
        forms.submit();
    }
    //搜索
    function findSetting() {
        var forms = document.getElementById("setting");
        forms.submit();
    }

    function ShowElement(element,id) {
        var oldhtml = element.innerHTML;
        //创建新的input元素
        var newobj = document.createElement('input');
        //为新增元素添加类型
        newobj.type = "text";
        newobj.style.width="100px";
        newobj.style.textAlign="left";
        //为新增元素添加value值
        //newobj.value="oldhtml";
        //为新增元素添加光标离开事件
        newobj.onblur = function() {
            //当触发时判断新增元素值是否为空，为空则不修改，并返回原有值
            if(newobj.value==""){
                oldhtml.replace(/(^\s*)|(\s*$)/g, "");
                newobj.value=oldhtml;
            }
            element.innerHTML = this.value == oldhtml ? oldhtml : this.value;
            //当触发时设置父节点的双击事件为ShowElement
            element.setAttribute("ondblclick", "ShowElement(this);");
            //alert(newobj.value);(修改后的数据)
            if(newobj.value.match(/^\s*$/)){
                alert("长度为0");
            }else{
                console.log("修改前"+newobj.value);
                var paramValue=document.getElementById("paramValue").value=newobj.value;
                console.log("修改后"+paramValue);
                var cid=document.getElementById("cid").value=id;
                // alert(cid);
                var upForm=document.getElementById("upForm");
                upForm.submit();
            }
        }
        //设置该标签的子节点为空
        element.innerHTML = '';
        //添加该标签的子节点，input对象
        element.appendChild(newobj);
        //设置选择文本的内容或设置光标位置（两个参数：start,end；start为开始位置，end为结束位置；如果开始位置和结束位置相同则就是光标位置）
        newobj.setSelectionRange(0, oldhtml.length);
        //设置获得光标
        newobj.focus();

        //设置父节点的双击事件为空
        newobj.parentNode.setAttribute("ondblclick", "");
    }
</script>
</body>
</html>

